<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加规则</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/css/public.css">

    <style>
        .layui-upload-list img {
            height: 100px;
            width: 100px;
        }


        .zy {
            overflow: auto;
        }

        .zy .layui-input {
            min-width: 100px;
        }

    </style>

</head>
<body>
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">
        <div class="layui-form-item" style="padding:10px 10px 0 0;border: 2px dashed #dedede">
            <label class="layui-form-label" style="text-align:center;line-height: 100px">附件信息</label>
            <input type="hidden" name="attachlink[attachlink_id]" value="{$attachlink.id}"/>
            <div class="layui-input-block">
                <div class="layui-row layui-col-space5" style="display:flow-root;">

                    <div class="layui-col-md8">
                        <div class="layui-form-item">
                            <label class="layui-form-label">下载方式</label>
                            <div class="layui-input-block">
                                <?php $download_type=$attachlink['download_type']; ?>
                                <input type="radio" name="attachlink[download_type]" value="-1" {if $download_type eq -1}checked=""{/if} title="默认">
                                <input type="radio" name="attachlink[download_type]" value="0" {if $download_type eq 0}checked=""{/if}title="游客模式">
                                <input type="radio" name="attachlink[download_type]" value="1" {if $download_type eq 1}checked=""{/if}title="回复下载">
                                <input type="radio" name="attachlink[download_type]" value="2"  {if $download_type eq 2}checked=""{/if}title="积分下载">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">下载积分</label>
                            <div class="layui-input-block">
                                <input type="number" name="attachlink[score]" value="{$attachlink.score}" class="layui-input layui-input-sm"
                                       placeholder="数字">
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md4">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <input type="text" name="attachlink[remark]" value="{$attachlink.remark}"
                                   class="layui-input layui-input-sm" placeholder="备注">
                        </div>
                    </div>


                    <div class="layui-col-md2" style="float: right">
                        <input type="button" value="增加一条" class="addSpec layui-btn layui-btn-sm">
                        <input type="button" value="全部删除"
                               class="all-link-delete layui-btn layui-btn-sm layui-btn-danger">
                    </div>
                </div>

                <div class="zy">
                    <table class="layui-table">
                        <colgroup>
                            <col width="210">
                            <col width="110">
                            <col width="90">
                            <col width="90">
                            <col width="50">
                        </colgroup>
                        <thead>
                        <tr>
                            <th nowrap="nowrap">链接地址</th>
                            <th nowrap="nowrap">名称</th>
                            <th nowrap="nowrap">提取码</th>
                            <th nowrap="nowrap">解压码</th>
                            <th nowrap="nowrap">操作</th>
                        </tr>
                        </thead>
                        <tbody id="specTab">

                        {volist name="attachlink['urls']" id="vo"}

                        <tr>
                            <td><input type="text" name="attachlink[urls][{$key}][url]" value="{$vo.url|default=''}"
                                       class="layui-input layui-input-sm" lay-verify="required" placeholder="链接"></td>
                            <td><input type="text" name="attachlink[urls][{$key}][title]" value="{$vo.title|default=''}"
                                       class="layui-input layui-input-sm" placeholder="名称"></td>
                            <td><input type="text" name="attachlink[urls][{$key}][code]" value="{$vo.code|default=''}"
                                       class="layui-input layui-input-sm" placeholder="提取码"></td>
                            <td><input type="text" name="attachlink[urls][{$key}][passwd]"
                                       value="{$vo.passwd|default=''}" class="layui-input layui-input-sm"
                                       placeholder="解压码"></td>
                            <td>
                                <button type="button" data-index="{$k}"
                                        class="link-delete layui-btn layui-btn-sm layui-btn-danger">
                                    <i class="layui-icon"></i>
                                </button>
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="hr-line"></div>
        <div class="submit-info text-center">
            <a class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="formpost">确认</a>
            <a class="layui-btn layui-btn-primary layui-btn-sm" layform-close>关闭</a>
        </div>

    </form>
</div>
<!--js逻辑-->
<script src="/static/plugs/layui/layui.js"></script>
<script src="/static/formpost.js"></script>
<script type="text/javascript">
    var specTable = [];
    var index = {$k};
    layui.use(['form', 'upload', 'element'], function () {
        var form = layui.form,
            upload = layui.upload,
            $ = layui.jquery;

        $('.addSpec').on('click', function () {

            $('#specTab').append(`<tr>
                       <td><input type="text" name="attachlink[urls][${index}][url]"  class="layui-input layui-input-sm" lay-verify="required" placeholder="链接"></td>
                    <td><input type="text" name="attachlink[urls][${index}][title]"  class="layui-input layui-input-sm" placeholder="名称"></td>
                    <td><input type="text" name="attachlink[urls][${index}][code]"  class="layui-input layui-input-sm" placeholder="提取码"></td>
                    <td><input type="text" name="attachlink[urls][${index}][passwd]"  class="layui-input layui-input-sm" placeholder="解压码"></td>
                    <td><button type="button"  data-index="${index}" class="link-delete layui-btn layui-btn-sm layui-btn-danger">
                        <i class="layui-icon"></i>
                    </button></td>
                </tr>`)
            index++;
            form.render()



        });
        $('body').on('click', '.link-delete', function () {
            var num = $(this).data('index');
            // 移除元素
            $(this).parent().parent('tr').remove();
            // 规格数组移除
            specTable.splice(num, 1);
        })
        $(`.all-link-delete`).on('click', function () {
            specTable = [];
            $('#specTab').html('');
        })

        // $('.addSpec').click();
        upload.render({
            elem: '#attach_upbtn',
            url: "{:url('index/upload/upfile')}",
            accept: 'file',
            done: function (res) {
                if (res.code == 0) {
                    addlink(res.filename, res.data.src);
                } else {
                    layer.msg(res.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            }
        });
    });

</script>
</body>
</html>